import TitleMain from "@/components/common/TitleMain"
import ItemMoudle from "@/components/common/ItemModule"
import HomeCard, { type HomeCardProps } from "@/components/home/HomeCard"
import TableIndex from "@/components/common/TableIndex"
import type { ColumnsType } from "antd/es/table"

interface DataType {
  name: string
  ip: string
  key: string
}

const columns: ColumnsType<DataType> = [

  {
    title: '重保单位名称',
    dataIndex: 'name',
    ellipsis: true
    
  },
  {
    title: 'IP',
    dataIndex: 'ip',
  },
];

const dataSource: DataType[] = [];
for (let i = 0; i < 46; i++) {
  dataSource.push({
    name: `xxxxxxxx有限公司`,
    ip: `231.176.187.255`,
    key: `${i}`
  });
}

const data: HomeCardProps[] = [
  {
    name: '重保单位',
    num: 3929,
    bgClass: 'bg-[url(@/assets/svg/Situation-1.svg)]'
  },
  {
    name: '重保对象',
    num: 4618,
    bgClass: 'bg-[url(@/assets/svg/Situation-2.svg)]'
  },
  {
    name: '重保网站域名',
    num: 9320,
    bgClass: 'bg-[url(@/assets/svg/Situation-3.svg)]'
  },
  {
    name: '重保IP',
    num: 9860,
    bgClass: 'bg-[url(@/assets/svg/Situation-4.svg)]'
  },
]

const Situation = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[408px]"
    header={
      <TitleMain title="重保情况" />
    }
  >
    <div className="flex flex-wrap mb-[10px] gap-[16px]">
      {
        data.map((item, index) => {
          return <HomeCard {...item} key={index} />
        })
      }
    </div>
    <TableIndex<DataType>
      columns={columns}
      data={dataSource}
      index
      scroll={{ y: 184, x: 360 }}
    />
  </ItemMoudle>
}


export default Situation